{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<Hds::Tabs @onClickTab={{this.onClickTab}} @selectedTabIndex={{this.selectedTabIndex}} as |T|>
  {{#each-in @authTabData as |methodType mounts|}}
    <T.Tab data-test-auth-tab={{methodType}}>{{auth-display-name methodType}}</T.Tab>
    <T.Panel>
      <div class="has-top-padding-m">
        {{! Elements "behind" tabs always render on the DOM and are just superficially hidden/shown. 
	        However, for accessibility, we only want to render form inputs relevant to the selected method. 
	        By wrapping the elements in this conditional, it only renders them when the tab is selected. }}
        {{#if (eq @selectedAuthMethod methodType)}}
          <Auth::MountsDisplay
            @mounts={{mounts}}
            @shouldRenderPath={{not-eq @selectedAuthMethod "token"}}
            @hideType={{true}}
          />
        {{/if}}
      </div>
    </T.Panel>
  {{/each-in}}
</Hds::Tabs>